<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>酒店预订，酒店查询，宾馆住宿预订,网上订酒店-【爱爱网】</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="x-dns-prefetch-control" content="on">
		<link rel="dns-prefetch" href="http://pic.c-ctrip.com">
		<link rel="dns-prefetch" href="http://res.m.ctrip.com">
		<link rel="dns-prefetch" href="http://images4.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webresource.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webapi.amap.com">
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style>
			ul {
				padding: 0;
			}
			
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				background: transparent;
			}
			/* 渐变头部导航--开始 */
			
			.mui-title {
				background-color: transparent;
			}
			
			.mui-bar-transparent {
				top: 0;
				background-color: rgba(247, 247, 247, 0);
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			/* 渐变头部导航--结束 */
			/* 收藏--开始 */
			
			.collect-icon {
				position: absolute;
				font-size: 0;
				top: 2rem;
				right: 1.2rem;
				z-index: 100;
			}
			
			.collect-icon img {
				width: 3rem;
				vertical-align: middle;
			}
			/* 收藏--结束 */
			/* 顶部轮播图--开始 */
			
			.mui-slider-item img {
				/*height: 19rem;*/
			}
			/* 轮播图点点--开始 */
			
			.mui-slider-indicator {
				font-size: 0;
			}
			
			.mui-slider-indicator .mui-indicator {
				-webkit-box-shadow: none;
				box-shadow: none;
				background: rgba(255, 255, 255, 0.5);
			}
			/* 轮播图点点--结束 */
			/* 顶部轮播图--结束 */
			/* 弧形--开始 */
			
			.arc-shaped {
				width: 100%;
				position: absolute;
				left: 0;
				bottom: -1px;
				text-align: center;
			}
			
			.arc-shaped img {
				width: 100%;
				vertical-align: middle;
			}
			/* 弧形--结束 */
			/* 主体内容--开始 */
			/* 重写样式--开始 */
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.mui-table-view {
				margin-bottom: 1.2rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				background-color: transparent;
			}
			
			.mui-table-view-cell {
				font-size: 1.6rem;
				color: #333;
				padding: 1.2rem 2.4rem 1.2rem 3.3rem;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				margin: 0;
			}
			
			.mui-table-view-cell:after {
				background-color: transparent;
			}
			
			.hotel-fixed-area {
				display: flex;
				align-items: center;
				flex: 10;
			}
			
			.hotel-fixed-area img {
				vertical-align: middle;
			}
			
			.mui-navigate-right:after,
			.mui-push-right:after {
				right: 0;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
				height: 100%;
			}
			/* 重写样式--结束 */
			/* 自定义公共类--开始 */
			
			.flex {
				display: flex;
				align-items: center;
			}
			
			.font0 {
				font-size: 0;
			}
			
			.font12 {
				font-size: 1.2rem;
				color: #999;
			}
			
			.font16 {
				font-size: 1.6rem;
			}
			/* 自定义公共类--结束 */
			/* 左侧图标--开始 */
			
			.icon {
				margin-right: 1.5rem;
			}
			/* 左侧图标--结束 */
			/* 我的位置--开始 */
			
			.cur-location {
				text-align: center;
				background-color: #fff;
			}
			
			.address {
				font-size: 1.4rem;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.position {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.position span {
				padding-top: 0.6rem;
			}
			
			.position img {
				width: 1.5rem;
			}
			/* 我的位置--结束 */
			/* 入住离店时间--开始 */
			
			.date {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			
			.date span {
				font-size: 1.2rem;
				color: #999;
			}
			
			.date .type {
				line-height: 1.2rem;
			}
			
			.in {
				padding-right: 2rem;
			}
			
			.out {
				padding-left: 2rem;
			}
			
			.date-time {
				display: flex;
			}
			
			.date-time .day {
				font-size: 2.8rem;
				color: #e61874;
				padding-top: 0.6rem;
				padding-right: 0.6rem;
			}
			
			.date-timer {
				display: flex;
				flex-direction: column;
			}
			
			.date-timer span {
				line-height: 1.2rem;
				font-size: 1.2rem;
				color: #333;
			}
			
			.date-timer .month {
				padding-bottom: 0.6rem;
			}
			
			.stay-time {
				font-size: 1.2rem;
				color: #999 !important;
				padding-left: 0 !important;
				padding-right: 1.6rem !important;
				text-align: right;
			}
			
			.keyword {
				font-size: 1.6rem;
				color: #ccc;
			}
			/* 入住离店--结束 */
			/* 关键字搜索--开始 */
			
			input[type=search] {
				width: 80%;
				background-color: transparent;
				margin-bottom: 0;
				padding-left: 0;
				text-align: left;
				color: #ccc;
			}
			/* 关键字搜索结束 */
			/* 搜索按钮--开始 */
			
			.search-btn {
				padding: 1.2rem 2.4rem;
			}
			
			.mui-content-padded {
				margin: 0;
			}
			
			.mui-btn-block {
				height: 4.5rem;
				line-height: 4.5rem;
				font-size: 1.6rem;
				background: linear-gradient(to right, #e61874, #c53ef4);
				border: none;
				padding: 0;
				margin-bottom: 0;
				border-radius: 4.5rem;
				box-shadow: 1px 1px 0.6rem #E61874;
			}
			/* 搜索按钮--结束 */
			/* 主体内容--结束 */
			/* 酒店推荐--开始 */
			
			li,
			a {
				list-style: none;
				text-decoration: none;
				color: #333;
			}
			/* 全局默认样式--结束 */
			
			.content-wrap {
				margin: 0.6rem 0;
				background-color: #fff;
			}
			
			.header {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 1.2rem 2.1rem;
			}
			
			.num {
				color: #333;
				font-size: 0;
			}
			
			.num span {
				font-size: 1.4rem;
				padding-right: 1.2rem;
			}
			
			.header-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 1.8rem;
				color: #e11470;
				font-weight: normal;
				margin-top: 0;
				margin-bottom: 0;
				padding: 1.2rem 0 1.2rem 2.1rem;
			}
			
			.header-title h5 img {
				width: 2rem;
				vertical-align: middle;
			}
			
			.hotel-recommend {
				width: 100%;
				display: inline-block;
				text-align: center;
				font-size: 0;
				padding: 0 2.1rem;
				margin: 0;
			}
			
			.hotel-recommend li {
				width: 50%;
				display: inline-block;
				padding-bottom: 1.2rem;
			}
			
			.hotel-img {
				position: relative;
				/*width: 8.025rem;*/
				/*height: 12rem;*/
			}
			
			.hotel-img img {
				border-radius: 0.5rem;
			}
			
			.hotel-price {
				display: flex;
				align-items: baseline;
				justify-content: center;
				position: absolute;
				left: 0;
				bottom: 1.8rem;
				font-size: 1.2rem;
				/*width: 6.6rem;*/
				height: 2.1rem;
				line-height: 2.1rem;
				color: #fff;
				padding: 0 0.7rem;
				background-color: rgba(230, 24, 116, 0.6);
				border-top-right-radius: 2.1rem;
				border-bottom-right-radius: 2.1rem;
			}
			
			.hotel-price-item {
				font-size: 1.6rem;
			}
			/* 媒体查询--开始 */
			
			@media screen and (min-width:320px) and (max-width:360px) {
				.hotel-price {
					bottom: 1.2rem;
				}
			}
			/* 媒体查询--结束 */
			
			.content span {
				display: block;
			}
			
			.con-title {
				font-size: 1.4rem;
				color: #333;
				padding-top: 0.9rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.con-distance {
				font-size: 1.2rem;
				color: #999;
				padding-top: 0.6rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			/* 引入别人写好的--开始 */
			
			h5 {
				font-size: 1.8rem;
				color: #e61874;
				margin: 0;
				padding: 0;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn) {
				font-size: 0;
				margin: 0 0 0 -2.1rem;
			}
			
			.mui-table-view.mui-grid-view {
				padding: 0 2.1rem 0 0;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell {
				padding: 0 0 0.6rem 2.1rem;
				margin-right: 0;
				text-align: left;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				height: 1.4rem;
				line-height: 1;
				font-size: 1.4rem;
				margin-top: 0.8rem;
				color: #333;
			}
			/* 引入别人写好的--结束  */
			/* 酒店推荐--结束 */
		</style>
	</head>

	<body>
		<!-- 渐变头部导航--开始 -->
		<!--<header id="header" class="mui-bar">-->
		<!--mui-bar-transparent-->
		<a class="collect-icon" href="#" data-url="./view-more.html">
			<img src="../styles/images/collect-icon.png" />
		</a>
		<!--</header>-->
		<!-- 渐变头部导航--结束 -->
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../styles/images/yuantiao.jpg">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../styles/images/shuijiao.jpg">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../styles/images/muwu.jpg">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../styles/images/cbd.jpg">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../styles/images/yuantiao.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../styles/images/shuijiao.jpg">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
				<div class="arc-shaped">
					<img src="../styles/images/index/bg_banner.png@2x.png" />
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell cur-location flex">
					<div class="hotel-fixed-area" data-url="./city2.html">
						<img class="icon" width="14" src="../styles/images/local-icon.png" />
						<a class="mui-navigate-right" style="position: relative;width: 85%;text-align: left;">
							<span id="position" class="address">请选择当前位置</span>
						</a>
						<!--<span style="width: 86%;">深圳市南山区海天二路</span>-->
					</div>
					<div class="position" onclick="queryGeoLocation()">
						<img src="../styles/images/position-icon.png" />
						<span class="font12">我的位置</span>
					</div>
				</li>
				<li id="calendar" class="mui-table-view-cell flex">

					<div class="hotel-fixed-area">
						<img class="icon" width="16" src="../styles/images/calendar-icon.png" />
						<div class="date in">
							<span class="type">入住</span>
							<div class="date-time">
								<span class="day" id="startD">07</span>
								<div class="date-timer">
									<span class="month"><span id="startM">07</span>月</span>
									<span id="startX">周一</span>
								</div>
							</div>
						</div>
						<span style="font-size: 2.8rem;color: #999;margin-top: 1.85rem;">/</span>
						<div class="date out">
							<span class="type">离店</span>
							<div class="date-time">
								<span class="day" id="endD">07</span>
								<div class="date-timer">
									<span class="month"><span id="endM">09</span>月</span>
									<span id="endX">周二</span>
								</div>
							</div>
						</div>
					</div>
					<a class="mui-navigate-right stay-time">
						<span id="datanum">1</span>晚
					</a>
				</li>
				<li class="mui-table-view-cell flex" data-url="./keywords.html">
					<div class="hotel-fixed-area">
						<img class="icon" width="16" src="../styles/images/search-icon.png" />
						<span class="keyword" id="keyword">关键字/位置/品牌/酒店名</span>
					</div>
					<img width="7.5" src="../styles/images/go-icon.png" style="vertical-align: bottom;" />
				</li>
				<div class="mui-content-padded search-btn" data-url="./hotel-list2.html">
					<button id="search" class="mui-btn mui-btn-block mui-btn-warning hotel-btn-main" type="button">搜索</button>
				</div>
			</ul>

			<!-- 引入别人写好的--开始 -->
			<div class="mui-table-view mui-grid-view">
				<div class="header-title" data-url="./hotel-recommend.html">
					<h5>
		    			<img src="../styles/images/index/icon_recommend_normal.png@2x.png"/>
		    			酒店推荐
		    		</h5>
					<span class="num">
						<span>50家</span>
					<img width="7.5" src="../styles/images/go-icon.png" style="vertical-align: bottom;" />
					</span>
				</div>
				<ul id="hotel-recommend">
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<div class="hotel-img">
								<img class="mui-media-object" src="../styles/images/avatar-icon1.png">
								<div class="hotel-price">￥<span class="hotel-price-item"> 288 </span>起</div>
							</div>
							<div class="mui-media-body">七天连锁</div>
							<div class="con-distance">距您0.3公里</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="#">
							<div class="hotel-img">
								<img class="mui-media-object" src="../styles/images/32.png">
								<div class="hotel-price">￥<span class="hotel-price-item"> 288 </span>起</div>
							</div>
							<div class="mui-media-body">七天连锁</div>
							<div class="con-distance">距您0.3公里</div>
						</a>
					</li>
				</ul>
			</div>
			<!-- 引入别人写好的--结束 -->
		</div>
		<!--<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="index.html">
				<img class="mui-icon mui-icon-gear" src="../styles/images/index/nav_home_pre.png@2x.png" />
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-url="information.html">
				<img class="mui-icon mui-icon-gear" src="../styles/images/index/nav_information_normal.png@2x.png" />
				<span class="mui-tab-label">资讯</span>
			</a>
			<a class="mui-tab-item" data-url="community.html">
				<img class="mui-icon mui-icon-gear" src="../styles/images/index/nav_community_normal.png@2x.png" />
				<span class="mui-tab-label">社区</span>
			</a>
			<a class="mui-tab-item" data-url="mine.html">
				<img class="mui-icon mui-icon-gear" src="../styles/images/index/nav_mine_normal.png@2x.png" />
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>-->
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./index.js'></script>
		<script src="//cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
		</script>
		<script type="text/javascript">
			mui.init({
				// 预加载酒店详情页
				preloadPages: [{
					id: 'hotel-detail2.html',
					url: 'hotel-detail2.html'
				}]
			});

			// 向酒店详情页传值
			var hotelDetailPage = null;
			// 添加列表项的点击事件
			mui('#hotel-recommend').on('tap', '.mui-table-view-cell', function(event) {
				var hotelid = this.getAttribute('id');
				var aChildren = this.children[0]
				var imgsrc = aChildren.children[0].children[0].getAttribute('src');
				var conDistance = aChildren.children[2].innerHTML;
				// console.log(conDistance);
				// 获得酒店详情页
				if(!hotelDetailPage) {
					hotelDetailPage = plus.webview.getWebviewById('hotel-detail2.html');
				}
				// 触发详情页的hdID事件
				mui.fire(hotelDetailPage, 'hdID', {
					id: hotelid,
					src: imgsrc,
					distance: conDistance //在触发详情页时通过键值对的方式将参数传过去
				});
				// 打开酒店详情页面
				mui.openWindow({
					id: 'hotel-detail2.html',
					show: {
						autoShow: true
					}
				});
			});

			// 轮播图
			var slider = mui("#slider");
			slider.slider({
				interval: 2000
			});

			//当前日期
			var startM = document.getElementById("startM"); // 获取当前入住月份
			var startD = document.getElementById("startD"); // 获取当前入住日
			var startX = document.getElementById("startX"); // 获取当前入住星期
			var endM = document.getElementById("endM"); // 获取当前离店月份
			var endD = document.getElementById("endD"); // 获取当前离店日
			var endX = document.getElementById("endX"); // 获取当前离店星期
			var datanum = document.getElementById("datanum"); // 获取入住到离店的天数
			var keyword = document.getElementById("keyword"); //获取选择的关键字
			var city = document.getElementById('position'); // 接收城市页传过来的被选中的城市
			var fullyear;
			var startTime;
			var endTime;
			var calendar = []; // 将当前入住和离店的日期保存到数组中
			var data = {};

			// 监听日历页的inID事件
			window.addEventListener('inID', function(event) {
				console.log("6666");
				startTime = event.detail.depDate;
				endTime = event.detail.endDate;
				var start = startTime.split("-");
				var end = endTime.split("-");
				startM.innerHTML = start[1];
				startD.innerHTML = start[2];
				endM.innerHTML = end[1];
				endD.innerHTML = end[2];
				// 计算天数
				var num = getTime2Time(endTime, startTime);
				datanum.innerHTML = num;
				data = {
					'startM': startM.innerHTML,
					'startD': startD.innerHTML,
					'endM': endM.innerHTML,
					'endD': endD.innerHTML,
					'datanum': datanum.innerHTML
				};
				var time = JSON.stringify(data);
				localStorage.setItem('data', time);
			});

			window.addEventListener('newsId', function(event) {
				// 获得事件参数
				var id = event.detail.id;
				// 根据id向服务器请求酒店详情
				city.innerHTML = id;
			});

			// 监听选择关键字后返回的数据
			window.addEventListener('keyword', function(event) {
				// console.log(event.detail.keyword);
				keyword.innerHTML = event.detail.keyword;
				keyword.style.color = "#333";
			});
			// 第一步：获取当前位置经纬度
			var myLng;
			var myLat;

			function queryGeoLocation() {
				city.innerHTML = "正在定位...";
				plus.geolocation.getCurrentPosition(function(res) { // getCurrentPosition: 获取当前设备位置信息
					//  plus.geolocation.watchPosition(function(res) { // watchPosition:监听设备位置变化信息 (实时更新)
					city.innerHTML = res.addresses;
					// console.log(JSON.stringify(res.address));
					localStorage.setItem('curCity', res.address.city);
					// console.log(localStorage.getItem('curCity'));
					myLng = res.coords.longitude;
					// console.log(myLng);
					myLat = res.coords.latitude;
					var position = localStorage.setItem("position", city.innerHTML);
					localStorage.setItem("myLng", myLng); // 将当前位置经度存入缓存中
					localStorage.setItem("myLat", myLat); // 将当前位置纬度存入缓存中
					hotel();
				}, function(res) {}, {
					provider: 'baidu' // 优先使用的定位模块  百度定位模块
				});
			}

			// 第二步：传入酒店经纬度，与设备当前的经纬度计算得到两者之间的距离
			function distance(lng, lat, cb) {
				var point1 = new plus.maps.Point(myLng, myLat); // 通过传入的经纬度定位设备当前位置的坐标
				var point2 = new plus.maps.Point(lng, lat); // 通过传入的经纬度定位酒店当前位置的坐标
				plus.maps.Map.calculateDistance(point1, point2, function(event) {
					var dist = event.distance; // 转换后的距离值
					// console.log("转换后的距离值",dist);
					cb(dist);
				}, function(e) {
					alert("Failed:" + JSON.stringify(e));
				});
			}

			var dataAll; //ajax获取的数据
			var arr = []; //存放所有的距离
			var hotelRecommend = document.getElementById("hotel-recommend");
			var reNum = document.getElementsByClassName("num")[0].children[0];
			//获取酒店数据
			function hotel() {
				mui.ajax('http://www.aiai.com/api/recom', {
					dataType: 'json',
					type: 'get',
					success: function(data) {
						reNum.innerHTML = data.length + "家";
						//存所有数据
						dataAll = data;
						// console.log(dataAll);
						for(var i = 0; i < data.length; i++) {
							distance(data[i].longitude, data[i].latitude, function(dist) {
								arr.push(Math.floor(dist / 1000));
								// if(arr.length <= 4) {
								rundata();
								// }
							})
						}
					}
				});
			}

			// 第三步：将数据渲染到页面
			function rundata() {
				var html = "";
				var recomArr = [];
				for(var j = 0; j < dataAll.length; j++) {
					// console.log(JSON.stringify(dataAll));
					html += '<li id="' + dataAll[j].hotelid + '" class="mui-table-view-cell mui-media mui-col-xs-6">';
					html += '<a href="#">';
					html += '<div class="hotel-img">';
					html += '<img class="mui-media-object" id="imgsrc" src="' + dataAll[j].appearancepicurl + '">';
					html += '<div class="hotel-price">￥<span class="hotel-price-item">' + dataAll[j].saleprice + '</span>起</div>';
					html += '</div>';
					html += '<div class="mui-media-body">' + dataAll[j].hotelchnname + '</div>';
					html += '<div id="con-distance" class="con-distance">距您' + arr[j] + '公里</div>';
					html += '</a></li>'
					recomArr.push(arr[j]);
					localStorage.setItem('recomArr', recomArr);
				}
				hotelRecommend.innerHTML = html;
			}

			//显示当前日期
			function datelist() {
				//今天
				var myDate = new Date();
				var show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
				fullyear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)  
				var Month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)  
				var Day = myDate.getDate(); //获取当前日(1-31)  
				var xinqi = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
				if(Month < 10) {
					var sMonth = "0" + Month;
					startM.innerHTML = sMonth;
				} else {
					startM.innerHTML = Month;
				}
				if(Day < 10) {
					var sDay = "0" + Day;
					startD.innerHTML = sDay;
				} else {
					startD.innerHTML = Day;
				}
				startX.innerHTML = show_day[xinqi];
				//明天
				var dd = new Date();
				dd.setDate(dd.getDate() + 1); //获取1天后的日期 
				var y = dd.getFullYear();
				var m = dd.getMonth() + 1; //获取当前月份的日期 
				var d = dd.getDate();
				var x = dd.getDay(); //获取当前星期X(0-6,0代表星期天)
				if(m < 10) {
					var eMonth = "0" + m;
					endM.innerHTML = eMonth;
				} else {
					endM.innerHTML = m;
				}
				if(d < 10) {
					var eDay = "0" + d;
					endD.innerHTML = eDay;
				} else {
					endD.innerHTML = d;
				}
				endX.innerHTML = show_day[x];

				var initStart = fullyear + "-" + startM.innerHTML + "-" + startD.innerHTML; // 入住时间
				var initEnd = y + "-" + endM.innerHTML + "-" + endD.innerHTML; // 离店时间
				var num = getTime2Time(initEnd, initStart);
				datanum.innerHTML = num;
				data = {
					'startM': startM.innerHTML,
					'startD': startD.innerHTML,
					'endM': endM.innerHTML,
					'endD': endD.innerHTML,
					'datanum': datanum.innerHTML
				};
				var time = JSON.stringify(data);
				localStorage.setItem('data', time);
			}

			//多少晚
			function getTime2Time($time1, $time2) {
				var time1 = arguments[0],
					time2 = arguments[1];
				time1 = Date.parse(time1) / 1000;
				time2 = Date.parse(time2) / 1000;
				var time_ = time1 - time2;
				return(time_ / (3600 * 24));
			}

			// 当点击搜索按钮时向后台发送数据进行检索
			var search = document.getElementById("search");
			var distanceArr = new Array();
			search.addEventListener('tap', function() {
				console.log("点击搜索");
				mui.ajax('http://www.aiai.com/api/hotellist', {
					data: {
						// position: localStorage.getItem("position"),
						// keyword: keyword.innerHTML,
						// myLng: localStorage.getItem("myLng"),
						// myLat: localStorage.getItem("myLat")
					},
					dataType: 'json',
					type: 'get',
					success: function(data) {
						// console.log(JSON.stringify(data));
						var listData = JSON.stringify(data);
						//console.log(listData);
						localStorage.setItem('listData', listData);
						var listDataObj = JSON.parse(localStorage.getItem('listData'));
						for(var i = 0; i < listDataObj.length; i++) {
							// 获取酒店的经纬度
							distance(listDataObj[i].longitude, listDataObj[i].latitude, function(dist) {
								distanceArr.push(Math.floor(dist / 1000));
								// console.log(typeof(distanceArr));
								localStorage.setItem('distanceArr', distanceArr);
								// console.log(localStorage.getItem('distanceArr'));
							})
						}
					}
				})
			});

			var calendarurl = document.getElementById("calendar");
			calendarurl.addEventListener('tap', function() {
				console.log("在首页点击日历");
				localStorage.removeItem('index');
				localStorage.setItem('index', 1);
				var index = localStorage.getItem('index');
				console.log("首页:" + index);
				// 打开日历页面
				mui.openWindow({
					url: 'calendar.html',
					id: 'calendar.html',
					show: {
						autoShow: true
					}
				});
			});

			mui.plusReady(function() {
				queryGeoLocation();
				datelist(); //监听价格日历表格
			});
		</script>
	</body>

</html>